/**
 * 应用设置 -- 包名列表设置
 *
 * @author artisan<jiangyiqiang@oneapm.com>
 */

import React from 'react';
import _ from 'underscore';
import dispatcher from 'lib/dispatcher';
import ReactTagInput from 'react-tagsinput';
import { restPostApi } from '../apis/core-util';

class PackageListSettingView extends React.Component {
  handleTagChange(tags) {
    let { appId, appVersionId, propertyChanging } = this.props
      , value = tags.join(',')
      , changeKey = `${ appId }:${ appVersionId }:setting.packages`
      , changes = {
        [changeKey]: `${ changeKey }:${ value }`
      };

    if (propertyChanging) {
      propertyChanging(['app', 'settings', 'setting.packages'], value, changes);
    }
  } // handleTagChange

  renderTag({key, tag, onRemove}) {
    return (
      <span className="react-tagsinput-tag" key={key}>
        { tag }
        {
          key === 0 ? null : <a className="react-tagsinput-remove" onClick={(e) => onRemove(key)} />
        }
      </span>
    )
  } // renderTag

  render() {
    let tags = _.filter(this.props.tags.split(','), item => item);

    return (
      <div className="pure-u-1">
        <div className="fetcher-container">
          <h5 className="card-title sub">
            崩溃设置
          </h5>
          <div className="content-container">
            <div className={`pure-u-1 tags-input-box ${ this.props.isEditing ? '' : 'disabled' }`}>
              <li>
                <label className="control-label">APP 引用包列名</label>
                {
                  this.props.isEditing ? (
                    <ReactTagInput
                      className="react-tagsinput"
                      value={ tags }
                      renderTag={ this.renderTag.bind(this) }
                      ref="tagInput"
                      addOnBlur={true}
                      onlyUnique={ true }
                      onChange={ this.handleTagChange.bind(this) }
                    />
                  ) : (
                    <div className="react-tagsinput">
                      {
                        tags.map((tag, index) => {
                          return (
                            <span className="react-tagsinput-tag" key={ index }>
                              { tag }
                              <a className="react-tagsinput-remove"></a>
                            </span>
                          )
                        })
                      }
                    </div>
                  )
                }
                {
                  !this.props.isEditing ? null : (
                    <p className="note" style={{ paddingLeft: 114, paddingTop: 5 }}>
                      设置用户关心的引起崩溃的 App 包名信息，可设置多个。默认展示 App 自身的包名，其它包名可自行追加设置。
                    </p>
                  )
                }
              </li>
            </div>
          </div>
        </div>
      </div>
    );
  } // render
}

PackageListSettingView.defaultProps = {
  tags: '',
  packageName: '',
};

PackageListSettingView.propTypes = {
  tags: React.PropTypes.string.isRequired,
  packageName: React.PropTypes.string.isRequired
};

export default PackageListSettingView;
